<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search_container">
      <view class="search_input">
        <view class="iconfont icon-RectangleCopy serach_icon"></view>
        <input v-model="keyword" placeholder="输入商品名" />
      </view>
      <view class="search_btn" @tap="search">搜索</view>
    </view>
    <!-- 商品列表 -->
    <view class="products_container">
      <scroll-view
        v-for="(item, index) in products"
        :key="index"
        scroll-y="true"
      >
        <product
          :goods_id="item.goods_id"
          :goods_small_logo="item.goods_small_logo"
          :goods_name="item.goods_name"
          :goods_price="item.goods_price"
        ></product>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import product from "../../components/Product";
import http from "../utils/http";
export default {
  data() {
    return {
      keyword: "",
      products: []
    };
  },
  components: {
    product
  },
  onLoad() {},
  methods: {
    async search() {
      this.products = await http.get("/goods/qsearch", { query: this.keyword });
      // console.log(this.products);
    }
  }
};
</script>

<style lang="less">
.container {
  .search_container {
    height: 61rpx;
    display: flex;
    justify-content: space-between;
    margin: 15rpx 18rpx;
    .search_input {
      flex: 1;
      background-color: #e7e7e7;
      border-radius: 27rpx;
      font-size: 25rpx;
      padding-left: 57rpx;
      display: flex;
      align-items: center;
      position: relative;
      .serach_icon {
        position: absolute;
        left: 15rpx;
        top: 16rpx;
      }
    }
    .search_btn {
      background-color: #ea4350;
      border-radius: 8rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 25rpx;
      width: 101rpx;
      color: #fff;
      margin-left: 15rpx;
    }
  }
}
</style>